<template>
    <item>
        {{label}}
        <ul>
            <li :class="[value==item.value?'selected':'']" v-for="item in list" @click="select(item)">{{item.text}}</li>
        </ul>
    </item>
</template>
<script>
//个人信息验证中的选择关系的组件
export default {
    props: {
        label: String,
        list: Array,
        value: null
    },
    methods: {
        select(item) {
            this.$emit('input', item.value);
        }
    }
}
</script>
<style lang="scss" scoped>
@import '../../asset/scss/mixin/export.scss';
.item {
    ul {
        display: inline-block;
        vertical-align: middle;
        margin-left: $pt20;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        li {
            padding-left: $pt15;
            float: left;
            margin-right: $pt15;
            background: url('/static/img/uncheck@3x.png') no-repeat left center;
            background-size: 10px 10px;
        }
        li.selected {
            background-image: url('/static/img/select@3x.png');
        }
    }
}
</style>